<extend name="Layout:base"/>

<block name="title">标题</block>
<block name="css">
    <link href="__PUBLIC__/css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</block>
<block name="bsgl">active</block>

<block name="menu">
    <h5 class="breadcrumbs-title">报名详情</h5>
    <ol class="breadcrumbs">
        <li class="active">报名详情
        </li>
    </ol>
</block>

<block name="main">
    <div class="row center">
        <h2>{:getEnrName($enid)}</h2>
    </div>

    <div class="row">
        <div class="col s12 m12 l12">
            <div class="card">
                <div class="card-move-up waves-effect waves-block waves-light">
                    <div class="move-up cyan darken-1">
                        <div>
                            <span class="chart-title white-text">各系报名分析</span>
                        </div>
                        <div class="trending-line-chart-wrapper">
                            <canvas id="trending-line-chart"></canvas>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <div class="row">

        <div class="col s12 m12 l12">
            <a class="modal-trigger waves-effect waves-light orange btn" href="#modal1">批量导入成绩</a>
            <a class="modal-trigger waves-effect waves-light blue btn"
               href="{:U('Admin/MatchDetails/outputTeam',array('enid'=>$enid))}">导出所有</a>
            <div id="modal1" class="modal">
                <form action="{:U('Admin/MatchDetails/importTeamScore')}" method="post" enctype="multipart/form-data">
                    <div class="modal-content">
                        <div class="row">
                            <div class="col s12 m12 l12">
                                <div class="file-field input-field">
                                    <div class="btn blue">
                                        <span>浏览</span>
                                        <input type="file" name="score">
                                    </div>
                                    <div class="file-path-wrapper">
                                        <input class="file-path validate" type="text" placeholder="请上传成绩Excel表">
                                    </div>
                                </div>
                                <div class="info">
                                    先导出报名学生信息表，然后在报名学生信息表中输入成绩
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="waves-effect waves-green btn-flat " value="导入">
                        <a href="#!" class="modal-close waves-effect waves-green btn-flat ">取消</a>
                    </div>
                </form>
            </div>
            <h5>报名学生信息</h5>
            <table class="bordered">
                <thead>
                <tr>
                    <th data-field="id">No</th>
                    <th data-field="name">团队成员</th>
                    <th data-field="addtime">报名时间</th>
                    <th data-field="addtime">成绩</th>
                </tr>
                </thead>

                <tbody>
                <volist name="ret" id="vo">
                    <tr>
                        <td>{$i}</td>
                        <td>{:getTeamName($vo[teamid])}</td>
                        <td>{:date("Y-m-d h:i:sa",$vo[addtime])}</td>
                        <td>
                            <if condition="empty($vo[grade])">成绩未出
                                <else/>
                                {$vo.grade}
                            </if>
                        </td>
                    </tr>
                </volist>
                </tbody>
            </table>
        </div>
    </div>


</block>

<block name="js">
    <!-- chartjs -->
    <script type="text/javascript" src="__PUBLIC__/js/chart.min.js"></script>
    <script>
        $('.modal-trigger').leanModal();
        //各系报名分析
        window.onload = function () {
            var LineChartSampleData = {
                labels: ["0", "0~10", "10~20", "20~30", "30~40", "40~50", "50~60", "60~70","70~80","80~90","90~100","100"],
                datasets: [{
                    label: "My First dataset",
                    fillColor: "rgba(128, 222, 234, 0.6)",
                    strokeColor: "#ffffff",
                    pointColor: "#00bcd4",
                    pointStrokeColor: "#ffffff",
                    pointHighlightFill: "#ffffff",
                    pointHighlightStroke: "#ffffff",
                    data: [{$Grade}]}]
            };

            window.LineChartSample = new Chart(document.getElementById("trending-line-chart").getContext("2d")).Line(LineChartSampleData, {
                scaleGridLineColor: "rgba(255,255,255,0.4)",
                scaleFontSize: 12,
                scaleFontStyle: "normal",
                scaleFontColor: "#fff",
                tooltipFillColor: "rgba(255,255,255,0.8)",
                tooltipFontSize: 12,
                tooltipFontColor: "#000",
                tooltipTitleFontSize: 14,
                tooltipTitleFontStyle: "bold",
                tooltipTitleFontColor: "#000",
                responsive: true
            });


            //本周报名分析
            var data = {
                labels: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                datasets: [
                    {
                        fillColor: "rgba(220,220,220,0.5)",
                        strokeColor: "rgba(220,220,220,1)",
                        data: [{:SumPeoWeek($enid)}]
                    }
                ]
            }

            new Chart(document.getElementById("myChart").getContext("2d")).Bar(data, {
                scaleGridLineColor: "rgba(255,255,255,0.4)",
                scaleFontSize: 12,
                scaleFontStyle: "normal",
                scaleFontColor: "#fff",
                tooltipFillColor: "rgba(255,255,255,0.8)",
                tooltipFontSize: 12,
                tooltipFontColor: "#000",
                tooltipTitleFontSize: 14,
                tooltipTitleFontStyle: "bold",
                tooltipTitleFontColor: "#000",
                responsive: true
            });


            //三日报名分析
            var days = {
                labels: ["前天", "昨天", "今天"],
                datasets: [{
                    label: "My First dataset",
                    fillColor: "rgba(128, 222, 234, 0.6)",
                    strokeColor: "#ffffff",
                    pointColor: "#00bcd4",
                    pointStrokeColor: "#ffffff",
                    pointHighlightFill: "#ffffff",
                    pointHighlightStroke: "#ffffff",
                    data: [{:SumPeoDay($enid)}]
                }]
        }
            ;

            window.LineChartSample = new Chart(document.getElementById("days").getContext("2d")).Line(days, {
                scaleGridLineColor: "rgba(255,255,255,0.4)",
                scaleFontSize: 12,
                scaleFontStyle: "normal",
                scaleFontColor: "#fff",
                tooltipFillColor: "rgba(255,255,255,0.8)",
                tooltipFontSize: 12,
                tooltipFontColor: "#000",
                tooltipTitleFontSize: 14,
                tooltipTitleFontStyle: "bold",
                tooltipTitleFontColor: "#000",
                responsive: true
            });

            //男女分析
            var PieDoughnutChartSampleData = [
                {
                    value: {:sumSexWoman($enid)},
                    color: "#F7464A",
                    highlight: "#FF5A5E",
                    label: "女"
                },
                {
                    value: {:sumSexMan($enid)},
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "男"
                }
            ]

            window.PieChartSample = new Chart(document.getElementById("doughnut-chart").getContext("2d")).Pie(PieDoughnutChartSampleData, {
                responsive: true
            });

        };

    </script>
</block>